// 模板、客户端交互功能未启用

const Vue = require('vue')
const fs = require('fs')
const renderer = require('vue-server-renderer').createRenderer({
    template: fs.readFileSync('./index.template.html','utf-8')
})
const express = require('express')

const server = express()
server.get('/', (req, res) => {
    const app = new Vue({
        template: `
            <div id="app">
                <h1 @click="clickHandler">{{message}}</h1>
                <input v-model="message"/>
            </div>
        `, 
        data() {
            return {
                message: '小明'
            }
        },
        methods:{
            // 因为服务端只给静态 html，js 交互没法完成
            clickHandler(){
                this.message = 'click'
            }
        }
    })
    renderer.renderToString(app,{
        title:'title',
        meta:'<meta name="description" content="测试" />'
    }, (err, html) => {
        if (err) res.status(500).end('Internal Server Error.')
        // 设置编码
        res.end(html)
    })
})
server.listen(3000,()=>{
    console.log(`server running at 3000`)
})
